<template>
  <div>
    <div class="type_box">
      <div class="type_box_item">
        <div class="title">项目分类：</div>
        <div>
          <el-radio-group v-model="type1">
            <el-radio-button label="全部" value="0" />
            <el-radio-button label="纯前端" value="1" />
            <el-radio-button label="纯后端" value="2" />
            <el-radio-button label="前后端" value="3" />
          </el-radio-group>
        </div>
      </div>
      <div class="type_box_item">
        <div class="title">平台类型：</div>
        <div>
          <el-radio-group v-model="type2">
            <el-radio-button label="全部" value="0" />
            <el-radio-button label="pc网页端" value="1" />
            <el-radio-button label="小程序" value="2" />
            <el-radio-button label="app" value="3" />
            <el-radio-button label="桌面应用" value="4" />
            <el-radio-button label="h5手机端" value="5" />
          </el-radio-group>
        </div>
      </div>
      <div class="type_box_item">
        <div class="title">
          技术栈：
        </div>
        <el-radio-group v-model="type3">
          <el-radio-button label="全部" value="0" />
          <el-radio-button label="java" value="1" />
          <el-radio-button label="php" value="2" />
          <el-radio-button label="vue2" value="3" />
          <el-radio-button label="vue3" value="4" />
          <el-radio-button label="html" value="5" />
          <el-radio-button label="react" value="6" />
          <el-radio-button label="uniapp" value="7" />
          <el-radio-button label="electron" value="8" />
          <el-radio-button label="jquery" value="9" />
        </el-radio-group>
      </div>
    </div>
    <div class="type_box">
      <div class="order_box">
        <div>排序方式：</div>
        <div style="color: #ff8a00;">综合排序</div>
      </div>
      <div class="content_box">
        <div class="content_list">
          <div class="page_item" v-for="(val, ind) in dataList" :key="ind">
            <div class="img_box" @click="toDetail(val)">
              <img :src="val.imgList[0]" alt="" class="img_a">
              <div class="content_desc">
                <div>
                  主题：{{ val.theme }}
                </div>
                <div class="ellipsis-2">
                  描述：{{ val.descript }}
                </div>
              </div>
            </div>
            <div class="price" style="display: flex; justify-content: space-between;line-height: 36px;">
              <div>
                ￥
                <span>{{ val.price }}</span>
              </div>
              <div style="color: #666;margin-right: 10px;">
                页面数：<span>{{ val.pageSize }}</span>
              </div>
            </div>
            <div class="tag_box">
              <el-tag v-for="(tag, tagInd) in val.tags" :key="tagInd" type="warning">{{ tag }}</el-tag>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { pageList } from '../../MockData';
import { useRouter } from 'vue-router';
import { ref, onMounted } from 'vue';
import { getCategories, getTechStacks, getProducts, getPlatforms } from '../../api';
import { ElMessage } from 'element-plus';
const type1 = ref('0');
const type2 = ref('0');
const type3 = ref('0');
const dataList = ref(pageList);
const categories = ref([]);
const techStacks = ref([]);
const platforms = ref([]);

const router = useRouter();

function toDetail(item) {
  router.push({ name: 'detail', params: { id: item.id } })
}

function initData() {
  getCategories().then(res => {
    // 处理分类数据
    categories.value = res.data;
  }).catch(err => {
    console.error('获取分类数据失败:', err);
    ElMessage.error('获取分类数据失败');
  });

  getTechStacks().then(res => {
    // 处理技术栈数据
    techStacks.value = res.data;
  }).catch(err => {   
    console.error('获取技术栈数据失败:', err);
    ElMessage.error('获取技术栈数据失败');
  });

  getPlatforms().then(res => {
    // 处理平台数据
    platforms.value = res.data;
  }).catch(err => {
    console.error('获取平台数据失败:', err);
    ElMessage.error('获取平台数据失败');
  });

  getProducts().then(res => {
    dataList.value = res.data;
  }).catch(err => {
    console.error('获取产品数据失败:', err);
  });
}
onMounted(() => {
  initData();
});
</script>
<style scoped lang="scss">
.img_a {
  transform: scale(1);
  transition: transform .5s;
}
.img_a:hover {
  transform: scale(1.3);
}
.type_box {
  box-shadow: 0 11px 21px 0 #d4d8e4;
  border-radius: 20px;
  background: #f6f7fa;
  margin: 30px 0;
  padding: 20px 30px;
  box-sizing: border-box;

  .type_box_item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 5px 0;

    .title {
      text-align: right;
      width: 100px;
      color: #ef8232;
    }
  }

  .order_box {
    display: flex;
    margin-bottom: 20px;
  }

  .page_item {
    display: flex;
    flex-direction: column;

    .img_box {
      width: 300px;
      height: 400px;
      overflow: hidden;
      /* 防止溢出 */
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      position: relative;
      border-radius: 8px;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        /* 保证图片完整显示，不被裁剪，按比例缩放 */
      }

      .content_desc {
        position: absolute;
        bottom: 0;
        left: 0;
        background: rgba($color: #000000, $alpha: .3);
        height: 90px;
        width: 100%;
        color: #fff;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 15px 15px 0 0;
      }
    }

    .price {
      color: #ff5000;
      font-weight: 700;

      span {
        font-size: 20px;
      }
    }

    .tag_box {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      width: 100%;
    }
  }
}
// .content_list {
//   display: flex;
//   flex-wrap: wrap;
//   gap: 40px;
// }
.content_list {
  display: grid;
  grid-template-columns: repeat(auto-fill, 300px); /* 每列固定宽度 120px */
  gap: 40px;
  justify-content: center; /* 保证左右居中对称 */
}
.ellipsis-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;       /* 限制最多显示2行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>